<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=0.5, minimum-scale=0.1, maximum-scale=2.0, user-scalable=yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <style type="text/css">
        .nodeLable{font-family:Arial,Verdana, Tahoma, Helvetica;font-size:12px;}
        .lineLable{font-family:Arial,Verdana, Tahoma, Helvetica;font-size:12px;}
        html,body{
            -webkit-overflow-scrolling:touch;-webkit-overflow: auto;
            width:100%;
            height:100%;
            margin-left:0px;
            margin-right:0px;
            margin-bottom:0px;
            margin-top:0px;
            zoom: 0.82;
            font-size: 12px;
        }
        #grid{
            -webkit-overflow-scrolling:touch;-webkit-overflow: auto;
            cursor:move;
        }
    </style>
</head>
<body >
<div  id="grid"  style="width:0px;height:0px;"  >
    <canvas id="myCanvas"  style="background-image:url('/suite/process/designer/img/grid/100.gif');border: 0px solid red;">
        Not supported canvas
    </canvas>
</div>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript">
	window.addEventListener('message',function(e){
					var data = JSON.parse(e.data)
					if(data.type=="reload"){
						if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){
							window.location.reload()
						}
					}
	},false);
var processId = getQueryString("id");
requestServlet("getProcessRunChart",{id:processId},function(processChrtData){
    var nodelist = processChrtData.nodelist;
    var connectionList = processChrtData.connectionList;
    var annotationsList = processChrtData.annotationsList;
    var laneList = processChrtData.laneList;
    var maxX=processChrtData.maxX;
    var maxY=processChrtData.maxY;
    if(maxX>$("body").width()){
        $("#grid").width(maxX+200)
        $("#myCanvas").attr("width",maxX+200+"px")
    }else{
        $("#grid").width($("body").width()+100)
        $("#myCanvas").attr("width",$("body").width()+100+"px")
    }
    if(maxY>$("body").height()){
        $("#grid").height(maxY+200)
        $("#myCanvas").attr("height",maxY+200+"px")
    }else{
        $("#grid").height($("body").height()+100)
        $("#myCanvas").attr("height",$("body").height()+100+"px")
    }
    var lanetop = 0;
    var laneleft = 0;
    for(var a=0;a<laneList.length;a++){

        var laneDiv = ""
        if(laneList[a].isVertical){
            if(a==0){
                laneDiv+="<div style='position:absolute;left:0px;top:0px;border-style:solid;border-color:"+laneList[a].color+";border-width:0.2em;width:"+laneList[a].dimension+"px;height:"+(Number($("#grid").height())+Number(0))+"px;' >"
            }else{
                laneDiv+="<div style='position:absolute;left:"+laneleft+"px;top:0px;border-style:solid;border-color:"+laneList[a].color+";border-width:0.2em;width:"+laneList[a].dimension+"px;height:"+(Number($("#grid").height())+Number(0))+"px;' >"
            }
            laneleft=laneleft+7+laneList[a].dimension;
            laneDiv+="<div style='width:100%;height:22px;background-color:"+laneList[a].color+";margin:1px;"+laneList[a].labelStyle+"text-align:center;vertical-align:middle;padding-top:1px;' >"+laneList[a].label+"</div>"
        }else{
            if(a==0){
                laneDiv+="<div style='position:absolute;left:0px;top:0px;border-style:solid;border-color:"+laneList[a].color+";border-width:0.2em;width:"+(Number($("#grid").width())+Number(0))+"px;height:"+laneList[a].dimension+"px;' >"
            }else{
                laneDiv+="<div style='position:absolute;left:0px;top:"+lanetop+"px;border-style:solid;border-color:"+laneList[a].color+";border-width:0.2em;width:"+(Number($("#grid").width())+Number(0))+"px;height:"+laneList[a].dimension+"px;' >"
            }
            lanetop=lanetop+7+laneList[a].dimension;
            laneDiv+="<div style='width:23px;height:100%;background-color:"+laneList[a].color+";margin:1px;"+laneList[a].labelStyle+"text-align:center;vertical-align:middle;' >"+laneList[a].label+"</div>"
        }

        laneDiv+="</div>"
        $("#grid").append(laneDiv);
    }

    for(var i=0;i<annotationsList.length;i++){
        var annotationsDiv = ""
        annotationsDiv = "<div style='position:absolute;left:"+annotationsList[i].x+"px;top:"+annotationsList[i].y+"px;border-style:solid;border-color:gray;border-width:0.1em;background-color:white;border-radius:5px;padding:3px;width:"+annotationsList[i].width+"px;height:"+annotationsList[i].height+"px;"+annotationsList[i].labelStyle+"' >"+annotationsList[i].text+"</div>"
        $("#grid").append(annotationsDiv);
    }

    for(var i=0;i<nodelist.length;i++){

        var div = ""
        if(nodelist[i].schemaId==19||nodelist[i].schemaId==20||nodelist[i].schemaId==9){
            div += "<div  nodetype='1' id='guiId_"+nodelist[i].guiId+"'  style=width:60px;height:40px;position:absolute;left:"+nodelist[i].x+"px;top:"+nodelist[i].y+"px; >"
            if(nodelist[i].status==0){
                if(nodelist[i].type=="process"&&nodelist[i].isRunProcess){
                    div+="<a target='_blank'  href='/suite/plugins/servlet/loadSource/CommunityPortal/PageAndJs/PageFiles/index.html#/app/processdetail/"+nodelist[i]["processInfo"][0].processId+"' ><img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/running.gif' /></a>"
                }else{
                    div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/running.gif' />"
                }
            }else if(nodelist[i].status==2){
                if(nodelist[i].type=="process"&&nodelist[i].isRunProcess){
                    div+="<a target='_blank' href='/suite/plugins/servlet/loadSource/CommunityPortal/PageAndJs/PageFiles/index.html#/app/processdetail/"+nodelist[i]["processInfo"][0].processId+"' ><img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/completed.gif' /></a>"
                }else{
                    div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/completed.gif' />"
                }
            }else if(nodelist[i].status==4){
                div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/cancelled.gif' />"
            }
            div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;' src='/suite/s/1427188791398/5/_/designer/smartservices/"+nodelist[i].localId+"/images/canvas/"+nodelist[i].iconId+".gif' />"

            div+="<div class='nodeLable' style='position:absolute;left:-50%;top:100%;width:200%;height:100%;z-index:2;border:0px;overflow:hidden;text-align:center;background:none transparent repeat 0% 0%;margin:1px 0 0 0;color:"+nodelist[i].nameStyle+"'  >"+nodelist[i].name+"</div>"
            if(nodelist[i].isAssign){
                //alert(nodelist[i].name);
                //alert(mini.encode(nodelist[i].taskInfo));
                if(nodelist[i].taskInfo.length>0){
                    if(nodelist[i].taskInfo[0].status>=1){
                        div+="<img style='position:absolute;left:80%;top:-30%;width:56%;height:100%;border:2px solid #ccc;;z-index:5;border-radius:5px;' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                    }else{
                        if(nodelist[i].taskInfo[0].assignees.length==1){
                            div+="<img style='position:absolute;left:80%;top:-30%;width:56%;height:100%;border:2px solid #ccc;;z-index:5;border-radius:5px;' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                        }else{
                            div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/attendedgroup.gif' />"
                        }
                    }
                }else{
                    div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                }
            }else{
                div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/unattended.gif' />"

            }

        }else if(nodelist[i].schemaId==5||nodelist[i].schemaId==4||nodelist[i].schemaId==6||nodelist[i].schemaId==3){
            div += "<div nodetype='2' id='guiId_"+nodelist[i].guiId+"'  style=width:32px;height:32px;position:absolute;left:"+nodelist[i].x+"px;top:"+nodelist[i].y+"px; >"
            if(nodelist[i].status==0){

                div+="<img style='position:absolute;left:14px;top:4px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/diamond/running.gif' />"
            }else if(nodelist[i].status==2){

                div+="<img style='position:absolute;left:14px;top:4px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/diamond/completed.gif' />"
            }else if(nodelist[i].status==4){
                div+="<img style='position:absolute;left:14px;top:4px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/diamond/cancelled.gif' />"
            }
            div+="<img style='position:absolute;left:14px;top:4px;width:100%;height:100%;boeder:0px;' src='/suite/s/1427188791398/5/_/designer/smartservices/"+nodelist[i].localId+"/images/canvas/"+nodelist[i].iconId+".gif' />"
            div+="<div class='nodeLable' style='position:absolute;left:-50%;top:110%;width:320%;height:120%;z-index:2;border:0px;overflow:hidden;text-align:center;background:none transparent repeat 0% 0%;margin:1px 0 0 0;color:"+nodelist[i].nameStyle+"'  >"+nodelist[i].name+"</div>"
        }else if(nodelist[i].schemaId==1||nodelist[i].schemaId==2||nodelist[i].schemaId==14||nodelist[i].schemaId==15){
            div += "<div nodetype='3' id='guiId_"+nodelist[i].guiId+"'  style=width:28px;height:28px;position:absolute;left:"+nodelist[i].x+"px;top:"+nodelist[i].y+"px; >"
            if(nodelist[i].status==0){
                if(nodelist[i].iconId==51){
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/end/running.gif' />"
                }else{
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/intermediate-event/running.gif' />"
                }
            }else if(nodelist[i].status==2){
                if(nodelist[i].iconId==51){
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/end/completed.gif' />"
                }else{
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/intermediate-event/completed.gif' />"
                }

            }else if(nodelist[i].status==4){
                if(nodelist[i].iconId==51){
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/end/cancelled.gif' />"
                }else{
                    div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/intermediate-event/cancelled.gif' />"
                }

            }

            div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/s/1427188791398/5/_/designer/smartservices/"+nodelist[i].localId+"/images/canvas/"+nodelist[i].iconId+".gif' />"
            if(nodelist[i].paletteId==77){
                div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/process/designer/img/smartnodes/canvas/event/message-consumer.gif' />"
            }else if(nodelist[i].paletteId==34){
                div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/process/designer/img/smartnodes/canvas/event/terminate-producer.gif' />"
            }else if(nodelist[i].paletteId==79){
                div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/process/designer/img/smartnodes/canvas/event/rule-consumer.gif' />"
            }else if(nodelist[i].paletteId==76){
                div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/process/designer/img/smartnodes/canvas/event/message-producer.gif' />"
            }else if(nodelist[i].paletteId==78){
                div+="<img style='position:absolute;left:16px;top:6px;width:100%;height:100%;boeder:0px;' src='/suite/process/designer/img/smartnodes/canvas/event/timer-consumer.gif' />"
            }

            div+="<div  class='nodeLable' style='position:absolute;left:-50%;top:120%;width:320%;height:120%;z-index:2;border:0px;overflow:hidden;text-align:center;background:none transparent repeat 0% 0%;margin:1px 0 0 0;color:"+nodelist[i].nameStyle+"'  >"+nodelist[i].name+"</div>"
        }else{

            div += "<div  nodetype='1' id='guiId_"+nodelist[i].guiId+"'  style=width:60px;height:40px;position:absolute;left:"+nodelist[i].x+"px;top:"+nodelist[i].y+"px; >"
            if(nodelist[i].status==0){

                div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/running.gif' />"
            }else if(nodelist[i].status==2){

                div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/completed.gif' />"
            }else if(nodelist[i].status==4){
                div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;z-index:3' src='/suite/process/designer/img/smartnodes/canvas/borders/rectangle/cancelled.gif' />"
            }

            div+="<img style='position:absolute;left:0px;top:0px;width:100%;height:100%;boeder:0px;' src='/suite/s/1427188791398/5/_/designer/smartservices/"+nodelist[i].localId+"/images/canvas/"+nodelist[i].iconId+".gif' />"

            div+="<div class='nodeLable' style='position:absolute;left:-50%;top:100%;width:200%;height:100%;z-index:2;border:0px;overflow:hidden;text-align:center;background:none transparent repeat 0% 0%;margin:1px 0 0 0;color:"+nodelist[i].nameStyle+"'  >"+nodelist[i].name+"</div>"
            if(nodelist[i].isAssign){
                //alert(nodelist[i].name);
                //alert(mini.encode(nodelist[i].taskInfo));
                if(nodelist[i].taskInfo.length>0){
                    if(nodelist[i].taskInfo[0].status>=1){
                        div+="<img style='position:absolute;left:80%;top:-30%;width:56%;height:100%;border:2px solid #ccc;;z-index:5;border-radius:5px;' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                    }else{
                        if(nodelist[i].taskInfo[0].assignees.length==1){
                            div+="<img style='position:absolute;left:80%;top:-30%;width:56%;height:100%;border:2px solid #ccc;;z-index:5;border-radius:5px;' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                        }else{
                            div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/attendedgroup.gif' />"
                        }
                    }
                }else{
                    div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
                }
            }else{
                div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/unattended.gif' />"

            }
        }

        //div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/attended.gif' />"
        //div+="<img style='position:absolute;left:80%;top:-17%;width:56%;height:100%;boeder:0px;z-index:5' src='/suite/process/designer/img/smartnodes/canvas/assignee/picframe.gif' />"
        div+="</div>"
        $("#grid").append(div)
    }
    var canvas = document.getElementById("myCanvas");
    if(canvas.getContext){
        var context = canvas.getContext("2d");
        for(var i=0;i<connectionList.length;i++){
            var from=connectionList[i].from;
            var to=connectionList[i].to;;
            var xfrom=$("#guiId_"+connectionList[i].startNodeGuiId).position().left;
            var yfrom=$("#guiId_"+connectionList[i].startNodeGuiId).position().top;
            var xto=$("#guiId_"+connectionList[i].endNodeGuiId).position().left;
            var yto=$("#guiId_"+connectionList[i].endNodeGuiId).position().top;
            var startNodeType=$("#guiId_"+connectionList[i].startNodeGuiId).attr("nodetype");
            var endNodeType=$("#guiId_"+connectionList[i].endNodeGuiId).attr("nodetype");
            var status=connectionList[i].status;
            var label = connectionList[i].label;
            var lableStyle = connectionList[i].lableStyle;
            //alert(from+":"+to)
            //alert(xfrom+":"+yfrom)
            //alert(xto+":"+yto)
            drawLine(context,from,to,xfrom+1,yfrom+1,xto+1,yto+1,status,label,lableStyle,startNodeType,endNodeType);

        }
        $( "#grid" ).draggable();
        window.parent.postMessage('{"type":"removeLoading","processId":"'+processId+'"}','*');
    }
});


    function drawLine(context,from,to,xfrom,yfrom,xto,yto,status,lable,lableStyle,startNodeType,endNodeType){
        label = lable;
        context.lineWidth=2;
        context.beginPath();
        if(status==1){
            context.strokeStyle = "#2EA6FD";
        }else{
            context.strokeStyle = "#808080";
        }
        //向右直线
        if(((from==3&&to==1)||(from==1&&to==3))&&yfrom==yto&&xfrom<=xto){
            if(startNodeType!=1){
                xfrom=xfrom+16;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto+14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto+16;
            }
            //连接线的文字
            var div = ""
            var left = Number(xfrom)+((xto-xfrom)/2)+10;
            arrowLable(label,lableStyle,(yfrom+8),left);

            //绘制线
            context.moveTo(xfrom, yfrom+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }


            //向右下折线
        }else if(((from==3&&to==1)||(from==1&&to==3))&&yfrom<=yto&&xfrom<=xto){
            if(startNodeType==3){
                xfrom=xfrom+14;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto+14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto+16;
            }
            //连接线的文字
            var left = Number(xfrom)+((xto-xfrom)/2)+10;
            arrowLable(label,lableStyle,(yfrom+(yto-yfrom)),left);

            context.moveTo(xfrom, yfrom+18);
            context.lineTo(xfrom+80, yfrom+18);
            context.lineTo(xfrom+80, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }

            //向右上折线
        }else if(((from==3&&to==1)||(from==1&&to==3))&&yfrom>=yto&&xfrom<=xto){
            if(startNodeType==3){
                xfrom=xfrom+14;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto+14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto+16;
            }
            //连接线的文字
            var left = Number(xfrom)+((xto-xfrom)/2)+10;
            arrowLable(label,lableStyle,(yto+8),left);

            context.moveTo(xfrom, yfrom+18);
            context.lineTo(xfrom+80, yfrom+18);
            context.lineTo(xfrom+80, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }
            //向左直线
        }else if(((from==3&&to==1)||(from==1&&to==3))&&yfrom==yto&&xfrom>=xto){
            if(startNodeType==3){
                xfrom=xfrom+14;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto-14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto-16;
            }
            //连接线的文字
            var left = Number(xto)+((xfrom-xto)/2)+10;
            arrowLable(label,lableStyle,(yfrom+8),left);

            //绘制线
            context.moveTo(xto, yto+18);
            context.lineTo(xfrom, yfrom+18);
            context.stroke();
            context.closePath();
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }
            //左下折线
        }else if(((from==3&&to==1)||(from==1&&to==3))&&yfrom<=yto&&xfrom>=xto){
            if(startNodeType==3){
                xfrom=xfrom+14;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto-14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto-16;
            }
            //连接线的文字
            var div = ""
            var left = Number(xfrom)+((xto-xfrom)/2)+10;
            arrowLable(label,lableStyle,(yfrom+8),left);

            context.moveTo(xto, yto+18);
            context.lineTo(xto+80, yto+18);
            context.lineTo(xto+80, yfrom+18);
            context.lineTo(xfrom, yfrom+18);
            context.stroke();
            context.closePath();
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }

            //左上折线
        }else if(((from==3&&to==1)||(from==1&&to==3))&&yfrom>=yto&&xfrom>=xto){
            if(startNodeType==3){
                xfrom=xfrom+14;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xfrom=xfrom+14;
                xto=xto-14;
            }else if(endNodeType==3){
                xfrom=xfrom+16;
                xto=xto-16;
            }
            //连接线的文字
            var left = Number(xfrom)+((xto-xfrom)/2)+10;
            arrowLable(label,lableStyle,(yfrom+8),left);

            context.moveTo(xto, yto+18);
            context.lineTo(xto+80, yto+18);
            context.lineTo(xto+80, yfrom+18);
            context.lineTo(xfrom, yfrom+18);
            context.stroke();
            context.closePath();
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }
            //向下直线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom==xto&&yfrom<=yto){
            if(startNodeType!=1){
                yfrom=yfrom+6;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yfrom=yfrom+4;
                yto=yto+4;
            }else if(endNodeType==3){
                yfrom=yfrom+4;
                yto=yto+4;
            }
            //连接线的文字
            var top = Number(yfrom)+((yto-yfrom)/2)+10;
            arrowLable(label,lableStyle,top,(xfrom+8));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //向右下直线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom<=xto&&yfrom<=yto){
            if(startNodeType!=1){
                yfrom=yfrom+6;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yfrom=yfrom+4;
                yto=yto+4;
            }else if(endNodeType==3){
                yfrom=yfrom+4;
                yto=yto+4;
            }
            //连接线的文字
            var top = Number(yfrom)+((yto-yfrom)/2)+10;
            arrowLable(label,lableStyle,top,(xto+8));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfrom+80);
            context.lineTo(xfrom+(xto-xfrom)+28, yfrom+80);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //向左下直线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom>=xto&&yfrom<=yto){
            if(startNodeType!=1){
                yfrom=yfrom+6;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yfrom=yfrom+4;
                yto=yto+4;
            }else if(endNodeType==3){
                yfrom=yfrom+4;
                yto=yto+4;
            }
            //连接线的文字
            var top = Number(yfrom)+((yto-yfrom)/2)+10;
            arrowLable(label,lableStyle,top,(xto+8));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfrom+80);
            context.lineTo(xfrom+(xto-xfrom)+28, yfrom+80);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //向上直线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom==xto&&yfrom>=yto){
            if(startNodeType==3){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
                yfrom=yfrom+4;
            }else if(endNodeType==3){
                yto=yto+8;
                yfrom=yfrom+8;
            }
            //连接线的文字
            var top = Number(yto)+((yfrom-yto)/2)+10;
            arrowLable(label,lableStyle,top,(xfrom+8));

            //绘制线
            context.moveTo(xto+28, yto);
            context.lineTo(xfrom+28, yfrom);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                yto=yto-8;
            }else if(endNodeType==3){
                yto=yto-16;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //左上折线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom>xto&&yfrom>=yto){
            if(startNodeType==3){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
                yfrom=yfrom+4;
            }else if(endNodeType==3){
                yto=yto+8;
                yfrom=yfrom+8;
            }
            //连接线的文字
            var top = Number(yto)+((yfrom-yto)/2)+10;
            arrowLable(label,lableStyle,top,(xto-8));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfrom-50);
            context.lineTo(xto+28, yfrom-50);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                yto=yto-8;
            }else if(endNodeType==3){
                yto=yto-16;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //右上折线
        }else if(((from==2&&to==0)||(from==0&&to==2))&&xfrom<xto&&yfrom>=yto){

            if(startNodeType!=1){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
                yfrom=yfrom+4;
            }else if(endNodeType==3){
                yto=yto+8;
                yfrom=yfrom+8;
            }
            //连接线的文字
            var top = Number(yto)+((yfrom-yto)/2)+10;
            arrowLable(label,lableStyle,top,(xto+8));


            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfrom-50);
            context.lineTo(xto+28, yfrom-50);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                yto=yto-8;
            }else if(endNodeType==3){
                yto=yto-16;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //折线上左
        }else if(from==0&&to==1&&xfrom>=xto){
            if(startNodeType!=3){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+28;
            }else if(endNodeType==3){
                xto=xto+32;
            }
            //连接线的文字
            arrowLable(label,lableStyle,Number(yto)+((yfrom-yto)/2)+10,(xfrom+8));
            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                xto=xto-42;
            }else if(endNodeType==3){
                xto=xto-48;
            }
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }
            //折线上右
        }else if(from==0&&to==3&&xfrom<=xto){
            if(startNodeType!=1){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+14;
            }else if(endNodeType==3){
                xto=xto+16;
            }
            //连接线的文字
            arrowLable(label,lableStyle,Number(yto)+((yfrom-yto)/2)+10,(xfrom+8));
            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }
            //折线右上
        }else if(from==1&&to==2&&yfrom>=yto){
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+6;
            }else if(endNodeType==3){
                yto=yto+8;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfrom+8,Number(xto)+((xfrom-xto)/2)+20);
            //绘制线
            context.moveTo(xfrom+28, yfrom+18);
            context.lineTo(xto+28, yfrom+18);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                yto=yto-12;
            }else if(endNodeType==3){
                yto=yto-14;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //折线左上
        }else if(from==1&&to==0&&yfrom<=yto){
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
            }else if(endNodeType==3){
                yto=yto+6;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfrom+8,Number(xto)+((xfrom-xto)/2)+20);
            //绘制线
            context.moveTo(xfrom+28, yfrom+18);
            context.lineTo(xto+28, yfrom+18);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //折线下右
        }else if(from==2&&to==3&&xfrom<=xto){
            if(startNodeType!=1){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+14;
            }else if(endNodeType==3){
                xto=xto+16;
            }
            //连接线的文字
            arrowLable(label,lableStyle,Number(yto)+((yfrom-yto)/2)+20,(xfrom+8));
            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }
            //折线下左
        }else if(from==2&&to==1&&xfrom>=xto){
            if(startNodeType!=1){
                yfrom=yfrom+8;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+14;
            }else if(endNodeType==3){
                xto=xto+16;
            }
            //连接线的文字
            arrowLable(label,lableStyle,Number(yto)+((yfrom-yto)/2)+20,(xfrom+8));
            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                xto=xto-28;
            }else if(endNodeType==3){
                xto=xto-32;
            }
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }
            //折线右上
        }else if(from==3&&to==2&&yfrom>=yto){
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
            }else if(endNodeType==3){
                yto=yto+6;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfrom+8,Number(xto)+((xfrom-xto)/2));
            //绘制线
            context.moveTo(xfrom+28, yfrom+18);
            context.lineTo(xto+28, yfrom+18);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(endNodeType==2){
                yto=yto-8;
            }else if(endNodeType==3){
                yto=yto-12;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //折线右下
        }else if(from==3&&to==0&&yfrom<=yto){
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
            }else if(endNodeType==3){
                yto=yto+6;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfrom+8,Number(xto)+((xfrom-xto)/2));
            //绘制线
            context.moveTo(xfrom+28, yfrom+18);
            context.lineTo(xto+28, yfrom+18);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //折线上上
        }else if(from==0&&to==0){
            if(startNodeType==1){
            }else if(startNodeType==2){
                yfrom=yfrom+4;
            }else if(startNodeType==3){
                yfrom=yfrom+6;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
            }else if(endNodeType==3){
                yto=yto+6;
            }
            var yfromWidth = yfrom;
            if(yto>yfrom){
                yfromWidth = yto;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfromWidth-88,Number(xto)+((xfrom-xto)/2));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfromWidth-80);
            context.lineTo(xto+28, yfromWidth-80);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(status==1){
                belowArrow(context,xto+18,yto-19,"#2EA6FD");
            }else{
                belowArrow(context,xto+18,yto-19,"#808080");
            }
            //折线右右
        }else if(from==1&&to==1){
            if(startNodeType==1){
            }else if(startNodeType==2){
                xfrom=xfrom+14;
            }else if(startNodeType==3){
                xfrom=xfrom+16;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+14;
            }else if(endNodeType==3){
                xto=xto+16;
            }
            var xfromWidth = xfrom;
            if(xto>xfrom){
                xfromWidth = xto;
            }
            //连接线的文字
            if(yfrom<yto){
                arrowLable(label,lableStyle,yfrom+40,xfromWidth+110);
            }else{
                arrowLable(label,lableStyle,yfrom-30,xfromWidth+110);
            }
            //绘制线
            context.moveTo(xfrom, yfrom+18);
            context.lineTo(xfromWidth+120, yfrom+18);
            context.lineTo(xfromWidth+120, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto-28;
            }else if(endNodeType==3){
                xto=xto-32;
            }
            if(status==1){
                leftArrow(context,xto+58,yto+3,"#2EA6FD");
            }else{
                leftArrow(context,xto+58,yto+3,"#808080");
            }
            //折线下下
        }else if(from==2&&to==2){
            if(startNodeType==1){
            }else if(startNodeType==2){
                yfrom=yfrom+4;
            }else if(startNodeType==3){
                yfrom=yfrom+6;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto+4;
            }else if(endNodeType==3){
                yto=yto+6;
            }
            var xfromWidth = xfrom;
            if(xto>xfrom){
                xfromWidth = xto;
            }
            var yfromWidth = yfrom;
            if(yto>yfrom){
                yfromWidth = yto;
            }
            //连接线的文字
            arrowLable(label,lableStyle,yfromWidth+70,Number(xto)+((xfrom-xto)/2));

            //绘制线
            context.moveTo(xfrom+28, yfrom);
            context.lineTo(xfrom+28, yfromWidth+80);
            context.lineTo(xto+28, yfromWidth+80);
            context.lineTo(xto+28, yto);
            context.stroke();
            context.closePath();
            if(endNodeType==1){
            }else if(endNodeType==2){
                yto=yto-8;
            }else if(endNodeType==3){
                yto=yto-12;
            }
            if(status==1){
                topArrow(context,xto+18,yto+39,"#2EA6FD");
            }else{
                topArrow(context,xto+18,yto+39,"#808080");
            }
            //折线左左
        }else if(from==3&&to==3){
            if(startNodeType==1){
            }else if(startNodeType==2){
                xfrom=xfrom+14;
            }else if(startNodeType==3){
                xfrom=xfrom+16;
            }
            if(endNodeType==1){
            }else if(endNodeType==2){
                xto=xto+14;
            }else if(endNodeType==3){
                xto=xto+16;
            }
            var xfromWidth = xfrom;
            if(xto>xfrom){
                xfromWidth = xto;
            }
            //连接线的文字
            if(yfrom<yto){
                arrowLable(label,lableStyle,yfrom+40,xfromWidth-90);
            }else{
                arrowLable(label,lableStyle,yfrom-40,xfromWidth-90);
            }
            //绘制线
            context.moveTo(xfrom, yfrom+18);
            context.lineTo(xfromWidth-80, yfrom+18);
            context.lineTo(xfromWidth-80, yto+18);
            context.lineTo(xto, yto+18);
            context.stroke();
            context.closePath();
            if(status==1){
                rightArrow(context,xto-10,yto+13,"#2EA6FD");
            }else{
                rightArrow(context,xto-10,yto+13,"#808080");
            }
        }else if(from==null&&to==null){

            //连接线的文字

            arrowLable(label,lableStyle,yfrom-((yfrom-yto)/2),xfrom-((xfrom-xto)/2));
            //绘制线
            context.moveTo(xfrom+20, yfrom+18);
            context.lineTo(xto+20, yto+18);
            context.stroke();
            context.closePath();

        }


    }





    function  arrowLable(lable,lableStyle,top,left){
        if(label!=null&&label!=""){
            var div = ""
            div += "<div class='lineLable'  style=position:absolute;left:"+left+"px;top:"+top+"px;z-index:1;width:40px;line-height:15px;background:#fff;text-align:center;"+lableStyle+"; >"
            div+=label
            div+="</div>"
            $("#grid").append(div)
        }
    }





    function belowArrow(context,x,y,color){

        context.beginPath();
        context.fillStyle=color;
        context.moveTo(x+10,y+20);
        context.lineTo(x+5,y+10);
        context.lineTo(x+15,y+10);
        context.fill();
        context.closePath();
    }

    function leftArrow(context,x,y,color){

        context.beginPath();
        context.fillStyle=color;
        context.moveTo(x+10,y+10);
        context.lineTo(x+10,y+20);
        context.lineTo(x,y+15);
        context.fill();
        context.closePath();
    }

    function rightArrow(context,x,y,color){

        context.beginPath();
        context.fillStyle=color;
        context.moveTo(x,y);
        context.lineTo(x,y+10);
        context.lineTo(x+10,y+5);
        context.fill();
        context.closePath();
    }

    function topArrow(context,x,y,color){

        context.beginPath();
        context.fillStyle=color;
        context.moveTo(x+10,y);
        context.lineTo(x+5,y+10);
        context.lineTo(x+15,y+10);
        context.fill();
        context.closePath();
    }
</script>
</body>
</html>
